<template>
  <div>
    <div>
      <el-button
        type="success"
        icon="el-icon-plus"
        circle
        style="margin-bottom: 10px"
        @click="show_dialog"
      ></el-button>
      <el-dialog :title="title" :visible.sync="dialog_add">
        <el-form
          :model="form_add"
          class="'demo_ruleForm'"
          :rules="rules"
          :ref="'demo_ruleForm'"
        >
          <el-form-item
            label="用户名"
            :label-width="formLabelWidth_add"
            prop="username"
          >
            <el-input v-model="form_add.username"></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            :label-width="formLabelWidth_add"
            prop="password"
          >
            <el-input v-model="form_add.password" show-password></el-input>
          </el-form-item>
          <el-form-item
            label="姓名"
            :label-width="formLabelWidth_add"
            prop="realname"
          >
            <el-input v-model="form_add.realname"></el-input>
          </el-form-item>
          <el-form-item
            label="姓别"
            :label-width="formLabelWidth_add"
            prop="gender"
          >
            <el-radio-group v-model="form_add.gender">
              <el-radio label="女"></el-radio>
              <el-radio label="男"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出生日期" :label-width="formLabelWidth_add">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                value-format="timestamp"
                v-model="form_add.birth"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item
            label="电话号码"
            :label-width="formLabelWidth_add"
            prop="telephone"
          >
            <el-input v-model="form_add.telephone"></el-input>
          </el-form-item>
          <el-form-item label="家庭住址" :label-width="formLabelWidth_add">
            <el-input v-model="form_add.address"></el-input>
          </el-form-item>
          <el-form-item
            label="电子邮箱"
            :label-width="formLabelWidth_add"
            prop="email"
          >
            <el-input v-model="form_add.email"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialog_add = false">取 消</el-button>
          <el-button type="primary" @click="toadd('demo_ruleForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <div>
      <!-- {{tabledata}}---- -->
      <el-table :data="tabledata" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="姓别">
                <span>{{ props.row.gender }}</span>
              </el-form-item>
              <el-form-item label="出生日期">
                <span>{{ props.row.birth | fmt }}</span>
              </el-form-item>
              <el-form-item label="地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="电子邮箱">
                <span>{{ props.row.email }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="工号" prop="id"> </el-table-column>
        <el-table-column label="用户名" prop="username"> </el-table-column>
        <el-table-column label="姓名" prop="realname"> </el-table-column>
        <el-table-column label="电话号码" prop="telephone"> </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template v-slot="scope">
            <!-- <span style="margin-right: 10px" @click="delete_user(scope.row.id)"
              >删除</span
            > -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              style="margin-right: 10px"
              @click="delete_user(scope.row.id)"
            ></el-button>
            <!-- <span @click="edit_user(scope.row)">修改</span> -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="edit_user(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="obj.pageSize"
        :current-page="obj.page"
        @current-change="change"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
import moment from "moment";
import axios from "../../http/axios";
import qs from "qs";
export default {
  created() {
    this.page_query(this.obj);
  },
  watch: {
    obj: {
      handler: function () {
        this.page_query();
      },
      deep: true,
    },
  },
  filters: {
    fmt(str) {
      return moment(str).format("YYYY-MM-DD");
    },
  },
  data() {
    return {
      tabledata: [],
      obj: {
        page: 1,
        pageSize: 10,
      },
      total: 0,
      dialog_add: false,
      form_add: {},
      formLabelWidth_add: "120px",
      title: "",
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 4,
            max: 12,
            message: "长度在 4 到 12 个字符",
            trigger: "blur",
          },
        ],
        realname: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        gender: [{ required: true, message: "请选择姓别", trigger: "change" }],
        telephone: [
          {
            required: true,
            pattern: /^1[34578]\d{9}$/,
            message: "请输入电话号码，目前只支持中国大陆的手机号码",
            trigger: "blur",
          },
        ],
        email: [
          {
            message: "请输入邮箱地址", //错误提示信息
            trigger: "blur", //检验方式（blur为鼠标点击其他地方，）
          },
          {
            type: "email", //要检验的类型（number，email，date等）
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    page_query() {
      axios({
        url: "http://39.102.37.84:8001/baseUser/pageQuery",
        method: "get",
        params: this.obj,
      }).then((res) => {
        // console.log(res,'=====');
        this.tabledata = res.data.data.list;
        this.total = res.data.data.total;
      });
    },
    change(page) {
      this.obj.page = page;
    },
    show_dialog() {
      this.dialog_add = true;
      this.form_add = {};
      this.title = "添加用户";
    },
    toadd(formName) {
      this.$refs[formName].validate(valid=>{
        if(valid){
          axios({
        url: "http://39.102.37.84:8001/baseUser/saveOrUpdate",
        method: "post",
        data: qs.stringify(this.form_add),
      }).then((res) => {
        this.dialog_add = false;
        if (res.status !== 200) {
          this.$message({
            message: "请输入内容",
            type: "warning",
          });
        } else if (this.title == "添加用户") {
          this.$message({
            message: "添加用户成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "修改用户成功",
            type: "success",
          });
        }
        this.page_query();
        })
      }else{
        this.$message.error('错了哦，请按照提示输入正确内容');
        console.log("error submit!!");
          return false;
      }
      
        // console.log(res);
      })
    },
    delete_user(id) {
      axios({
        url: "http://39.102.37.84:8001/baseUser/deleteById",
        method: "get",
        params: { id },
      }).then((res) => {
        console.log(res);
        this.$message({
          message: "删除用户信息成功",
          type: "success",
        });
        this.page_query();
      });
    },
    edit_user(val) {
      this.title = "修改用户";
      this.dialog_add = true;
      this.form_add = JSON.parse(JSON.stringify(val));
    },
  },
};
</script>